<script setup>

// 路径导航
import {onMounted, reactive, ref} from "vue";
import {RULE} from "../../../const/index.js";
import {ElMessage} from "element-plus";
import router from "../../../router/index.js";
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";
import {insertApi, listApi, updateApi} from "../../../api/axios.js";
import {getResponseData} from "../../../request/index.js";

// 资产下拉菜单选项
let assetsOptions = ref([]);
// 员工下拉菜单选项
let empOptions = ref([]);
// 资产记录
let assets = JSON.parse(sessionStorage.getItem('row'));
// 路径导航
const navItems = [
  {icon: 'List', label: '资源管理', url: '/Assets'},
  {icon: 'Coin', label: '资产申请列表', url: '/AssetsBorrow'},
  {icon: 'Edit', label: '修改资产申请信息'},
];

// 表单项 + 表单值 + 表单规则
let items = ref([
  {label: '资产名称', prop: 'fkAssetsId', type: 'select', options: assetsOptions.value, required: true},
  {label: '员工姓名', prop: 'fkEmpId', type: 'select', options: empOptions.value, required: true},
  {label: '申请数量', prop: 'count', type: 'number', required: true},
  {label: '申请时间', prop: 'borrowTime', type: 'datetime', required: true, placeholder: '请选择申请时间'},
  {label: '预计归还时间', prop: 'expectedReturnTime', type: 'datetime', required: true, placeholder: '请选择预计归还时间'},
  {label: '实际归还时间', prop: 'returnTime', type: 'datetime', placeholder: '请选择实际归还时间'},
  {label: '资产描述', prop: 'info', type: 'textarea', tooltip: false},

]);
let params = reactive(assets);
let rules = {title: RULE.TITLE, realname: RULE.REALNAME, info: RULE.INFO};

/* ======================================== 修改成功后 ================================================ */
function updateSuccess() {
  ElMessage.success('修改记录成功');
  setTimeout(() => router.push('/AssetsBorrow'), 1000);
}

/* =========================== 加载函数 ===================================== */

onMounted(async () => {
  // 查询全部资产
  let assetsAll = getResponseData(await listApi({module: 'assets'}));
  Object.values(assetsAll).forEach(assets => {
    assetsOptions.value.push({label: assets['title'], value: assets['id']});
  });

  // 查询全部员工
  let emps = getResponseData(await listApi({module: 'emp'}));
  Object.values(emps).forEach(emp => {
    empOptions.value.push({label: emp['realname'], value: emp['id']});
  });
});

</script>

<template>
  <my-nav :items="navItems"/>
  <el-card class="assetsBorrow-update-card" header="修改资产申请信息">
    <my-form type="update"
             :items="items"
             :params="params"
             :rules="rules"
             :api="updateApi"
             :args="{module: 'assetsBorrow'}"
             :callback="updateSuccess"/>
  </el-card>
</template>

<style scoped lang="scss">
.assetsBorrow-update-card {
  width: 60%; /// 宽度
  margin: 65px auto 0; // 外边距
}
</style>